<template>
  <el-dialog v-model="dialogVisible" :title="title" width="500px" @close="cancel">
    <el-form ref="ruleForm" :rules="rules" :model="form" label-width="100px">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="分组名称" prop="name">
            <el-input v-model="form.name" name="name">
            </el-input>
          </el-form-item>

        </el-col>

        <el-col :span="22">
          <el-form-item>
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="operateData">确定</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useForm} from "@/uses/useForm";
import http from "@/utils/request";

const form = ref({
  name: null
})

const rules = ref({
  name: [
    {required: true, message: '请输入分组名称', trigger: 'blur'}
  ]
})

const ruleForm = ref(null);

const disabledState = ref(false);
const dialogVisible = ref(true);
const title = ref(null);
const props = defineProps(['dataId', "model"])
const emit = defineEmits(['cancel', 'submit'])
const {operateData} = useForm("customerGroup", form, ruleForm, props.model, () => {
  emit("success")
})


onMounted(async () => {
  if (props.model !== 'create') {
    let param = {};
    param.id = props.dataId;
    let res = await http.post(`/customerGroup/view`, param);
    if (res.code === 200) {
      form.value = res.data;
    }

  }
  if (props.model === 'view') {
    disabledState.value = true;
    title.value = "查询客户分组"
  } else if (props.model === 'create') {
    title.value = "新增客户分组"
  }
  if (props.model === 'update') {
    title.value = "更新客户分组"
  }


})

const cancel = () => {
  emit("cancel")
}
</script>

<style scoped>
</style>
